﻿<template>
    <div>
        <el-form label-width="150px" :model="AddVehicleManagementDB" ref="AddVehicleManagementDB_refs">
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="车辆类型" prop="RoleId">
                        <el-select v-model="AddVehicleManagementDB.VehicleType" required   >
                            <el-option value="">---请选择在职状态---</el-option>
                            <el-option value="1" label="轿车">轿车</el-option>
                            <el-option value="2" label="越野车">越野车</el-option>
                            <el-option value="3" label="商务车">商务车</el-option>
                            <el-option value="4" label="面包车">面包车</el-option>
                            <el-option value="5" label="货车">货车</el-option>
                            <el-option value="6" label="工程用车">工程用车</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="汽车型号" prop="CarModel">
                        <el-input v-model="AddVehicleManagementDB.CarModel"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="汽车品牌" prop="CareName">
                        <el-input v-model="AddVehicleManagementDB.CareName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="商业保险" prop="CareInsurance">
                        <el-input v-model="AddVehicleManagementDB.CareInsurance"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="汽车牌照" prop="LicensePlate">
                        <el-input v-model="AddVehicleManagementDB.LicensePlate"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="车驾号" prop="HouseNumber">
                        <el-input v-model="AddVehicleManagementDB.HouseNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="年检日期" prop="AnnualTime">
                        <el-date-picker v-model="AddVehicleManagementDB.AnnualTime"
                                        class="wmax" 
                                        style=" width: 100%;"

                                        type="date"
                                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="发动机编号" prop="EngineNumber">
                        <el-input v-model="AddVehicleManagementDB.EngineNumber"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>


            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="购买时间" prop="PurchaseDate">
                        <el-date-picker v-model="AddVehicleManagementDB.PurchaseDate"
                                        class="wmax"
                                         style=" width: 100%;"

                                        type="date"
                                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>


                <el-col :span="10" :offset="1">
                    <el-form-item label="里程数" prop="Mileage">
                        <el-input v-model="AddVehicleManagementDB.Mileage"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="保险购买日期" prop="InsuranceData">
                        <el-date-picker v-model="AddVehicleManagementDB.InsuranceData" 
                                        style=" width: 100%;"
                                        type="date"
                                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="保险联系电话" prop="InsurancePhone">
                        <el-input v-model="AddVehicleManagementDB.InsurancePhone"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="汽车价格" prop="Price">
                        <el-input v-model.number="AddVehicleManagementDB.Price"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="汽车状态" prop="State">
                        <el-select v-model="AddVehicleManagementDB.State" required   class="wmax">
                            <el-option value="">---请选择在职状态---</el-option>
                            <el-option value="1" label="--正常--">--正常--</el-option>
                            <el-option value="2" label="--损坏--">--损坏--</el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="20" :offset="1">
                    <el-form-item label="备注" prop="Note">
                        <el-input v-model="AddVehicleManagementDB.Note"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <h2>上传图片信息</h2>
                    <el-form-item label="上传图片信息" prop="PostLevel">
                        <UploadFileF ref="AnotherData"
                                     :multiple="false"
                                     :another-data="AnotherData"
                                     :showfilelist="true"
                                     :upshow="false"
                                     content="上传图片信息"
                                     btnsize="medium"></UploadFileF>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col align="center">
                    <el-button type="success" @click="AddVehicleManagementDBSave">添加汽车</el-button>
                    <el-button type="success" @click="AddVehicleManagementDBreset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
    import * as publicjs from "/public/Scriput/Public"
    import UploadFileF from "../../UploadFileF";
    export default {
        name: "AddVehicleManagement",
        components: {
            UploadFileF,
        },
        data() {
            return {
                AddVehicleManagementDB: {
                    VehicleType: '',
                    CarModel: '',
                    CareName: '',
                    CareInsurance: '',
                    LicensePlate: '',
                    HouseNumber: '',
                    AnnualTime: '',
                    EngineNumber: '',
                    PurchaseDate: '',
                    Mileage: '0',
                    InsuranceData: '',
                    InsurancePhone: '',
                    Price: '',
                    State: '',
                    Note: '',
                }
                //文件上传参数
                , AnotherData: {
                    FileType: 64,
                    id: 1,
                    Type: 0,
                    Single: false,
                },
            }
        },
        created() {

        },
        methods: {
            AddVehicleManagementDBSave() {
                this.$refs.AddVehicleManagementDB_refs.validate((x, d) => {
                    if (x) {
                        let loadding = this.openLoading();
                        this.$http.post("VehicleManagement/VehicleInsert", { vehicle: this.AddVehicleManagementDB })
                            .then(res => {
                                loadding.close();
                                if (res.data.bit) {
                                    this.AnotherData.Type = res.data.id
                                    if (this.$refs['AnotherData'].fileList.length > 0) {
                                        this.$refs['AnotherData'].submitUpload()
                                    }
                                    this.$message.error("数据添加成功");
                                    this.$parent.$parent.AddVehicleManagementShow = false;
                                    this.$parent.$parent.GettableDB();
                                }
                                else {
                                    this.$message.error("添加车辆信息失败");
                                }
                            });
                    }
                });

            },
            AddVehicleManagementDBreset() {
                this.$refs["AddVehicleManagementDB_refs"].resetFields();
            },
        },
    }
</script>
<style  >
    .wmax {
        width: 100%;
    }
</style>


